<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        .page-parents-contact-info {
            padding: 40px;
        }

        .page-parents-contact-info-title {
            margin-bottom: 40px;
        }

        .page-parents-contact-info-label {
            -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            border-radius: 16px;
            background-color: #fff;
            height: 50px;
            position: relative;
            margin-left: 30px;
        }

        .page-parents-contact-info-label .avatar {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 100%;
            -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            padding: 5px;
            background-color: #fff;
            left: -30px;
            top: -7px;
            overflow: hidden;
        }

        .page-parents-contact-info-label .avatar img {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            border-radius: 100%;
        }

        .page-parents-contact-info-label .text {
            padding: 10px 20px 10px 40px;
            font-size: 10px;
            line-height: 1em;
        }

        .loading {
            margin-top: 2%;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }

        .first-loading {
            margin-top: 50%;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }
    </style>

</head>

<body>
    <div class="page-main">
        <div class="page-main-container">
            <div class="child-view page-parents-contact-info">
                <div class="ui-pd-l-18 page-parents-contact-info-title"><span class="ui-text-28">家长通讯录</span></div>
                <div class="page-parents-contact-info-label-list" id="data-list">

                </div>
                <div id="loading" class="loading">玩命加载中...</div>
            </div>
        </div>
        <form id="data-form">
            {{.xsrfdata}}
            <input type="hidden" id="cur-page" name="p" value="1">
        </form>
    </div>
</body>

<script>

    var canSubmit = true,
        canLoad = true,
        p = 1;

    function firstLoading(t) {
        $('#loading').removeClass('loading').addClass('first-loading').text(t).show();
    }

    function loading(t) {
        $('#loading').removeClass('first-loading').addClass('loading').text(t).show();
    }

    function loadMore() {

        if (!canSubmit) return false;
        canSubmit = false;
        var curPage = p++;
        $('#cur-page').val(curPage);
        if (curPage == 1) {
            firstLoading('玩命加载中...');
        } else {
            loading('玩命加载中...');
        }

        setTimeout(function () {
            $.ajax({
                url: '{{urlfor "parent.UserController.ParentAddressBookLoadMore"}}',
                type: 'POST',
                data: $('#data-form').serialize(),
                success: function (res) {

                    canSubmit = true;
                    if ($.trim(res) == "") {
                        canLoad = false;
                        if (curPage == 1) {
                            firstLoading('空空如也');
                            $('#data-list').hide();
                        } else {
                            loading('扯不动了，到底了');
                        }
                    } else {
                        $('#loading').hide();
                        $('#data-list').append(res);
                    }

                }
            });
        }, 1000);
    }

    $(function () {

        loadMore();

        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = $(this).scrollTop();
            //页面高度
            var scrollHeight = $(document).height();
            //浏览器窗口高度
            var windowHeight = $(this).height();
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            if (scrollTop + windowHeight == scrollHeight) {
                if (!canLoad) {
                    return false;
                }
                loadMore();
            }
        });

    });

</script>

</html>